Skip to content

West Midlands | Jan-2026 | Arunkumar Akilan | Sprint 1 | Wireframe to Web Code #995

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
arunkumarakilan wants to merge 8 commits into
base: main
Choose a base branch
from
Open

West Midlands | Jan-2026 | Arunkumar Akilan | Sprint 1 | Wireframe to Web Code #995

arunkumarakilan wants to merge 8 commits into from

Conversation

@arunkumarakilan
Copy link

@arunkumarakilan arunkumarakilan commented Jan 20, 2026 •
edited
Loading

Self checklist

  • I have titled my PR with the correct format
  • My changes meet the requirements of the task
  • I have tested my changes locally in the browser
  • My changes follow the CYF style guide

Changelist

  • Converted the provided wireframe into a semantic HTML webpage
  • Added a header with a page title and descriptive subtitle
  • Created three articles explaining:
    • Purpose of a Wireframe
    • Purpose of a README file
    • What a Git branch is
  • Styled the layout using CSS Grid to match the wireframe:
    • First article full width
    • Second and third articles displayed side by side
  • Added a footer with navigation links and contact information
  • Ensured the page scores 100 for Accessibility using Lighthouse

Questions

  • I would appreciate feedback on my CSS Grid implementation.
  • Any suggestions to further improve accessibility or layout consistency are welcome.

@netlify
Copy link

netlify bot commented Jan 20, 2026 •
edited
Loading

✅ Deploy Preview for cyf-onboarding-module ready!

Name Link
🔨 Latest commit 0cbf4b1
🔍 Latest deploy log https://app.netlify.com/projects/cyf-onboarding-module/deploys/6979d2dc12376800083b0244
😎 Deploy Preview https://deploy-preview-995--cyf-onboarding-module.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse		 2 paths audited
Performance: 100 (no change from production)
Accessibility: 100 (no change from production)
Best Practices: 100 (no change from production)
SEO: 86 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions

This comment has been minimized.

Sign in to view
@arunkumarakilan arunkumarakilan added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 20, 2026
@github-actions

This comment has been minimized.

Sign in to view
@github-actions github-actions bot removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 20, 2026
@arunkumarakilan arunkumarakilan added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 20, 2026
@github-actions

This comment has been minimized.

Sign in to view
@github-actions github-actions bot removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 20, 2026
@arunkumarakilan arunkumarakilan added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 20, 2026
@github-actions

This comment has been minimized.

Sign in to view
@github-actions github-actions bot removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 20, 2026
@arunkumarakilan arunkumarakilan added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 20, 2026
@github-actions

This comment has been minimized.

Sign in to view
@github-actions github-actions bot removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 20, 2026
@arunkumarakilan arunkumarakilan changed the title West Midlands | Jan-2026 | Arunkumar Akilan | Wireframe to Web Code West Midlands | Jan-2026 | Arunkumar Akilan | Onboarding | Wireframe to Web Code Jan 21, 2026
@github-actions

This comment has been minimized.

Sign in to view
@arunkumarakilan arunkumarakilan changed the title West Midlands | Jan-2026 | Arunkumar Akilan | Onboarding | Wireframe to Web Code West Midlands | Jan-2026 | Arunkumar Akilan | Sprint 1 | Wireframe to Web Code Jan 21, 2026
@arunkumarakilan arunkumarakilan added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 21, 2026
@cjyuan cjyuan added Review in progress This review is currently being reviewed. This label will be replaced by "Reviewed" soon. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels Jan 25, 2026
@cjyuan
Copy link
Contributor

cjyuan commented Jan 25, 2026 •
edited
Loading

The content in the PR Description is not yet properly formatted using the Markdown syntax. Can you update its format accordingly?

To learn the Markdown syntax, please refer to
https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

cjyuan
cjyuan reviewed Jan 25, 2026
View reviewed changes
Copy link
Contributor

@cjyuan cjyuan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • When a wireframe is provided, our implementation should closely reflect its appearance and layout to ensure consistency with design expectations. You're off to a solid start. To better align with the wireframe, can you center the PAGE TITLE and the PAGE SUBTITLE (the part that replace "A SHORT DESCRIPTION")?

  • (Optional change) If you are up to some challenge to further improve the layout, leave more space above and below the border of READ ME link, and keep the spacing consistent regardless of the amount of content in the articles.

Image

@cjyuan cjyuan added Reviewed Volunteer to add when completing a review with trainee action still to take. and removed Review in progress This review is currently being reviewed. This label will be replaced by "Reviewed" soon. labels Jan 25, 2026
@arunkumarakilan arunkumarakilan added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 28, 2026
cjyuan
cjyuan reviewed Jan 29, 2026
View reviewed changes
Copy link
Contributor

@cjyuan cjyuan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks good to me.

When it comes to CSS, I am afraid AI can probably help you more than I do. Have you tried asking AI about possible improvements on your CSS code?

Wireframe/style.css
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
padding-bottom: 80px;
}
Copy link
Contributor

@cjyuan cjyuan Jan 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are two main selectors (lines 57 and 95). It is better to merge them into one. (I know you didn't write them, but that's one possible improvement you can easily do).

There are also a few selectors that are related to main (lines 121-128). It is better to place all the selectors related to main element together.

@cjyuan cjyuan added Complete Volunteer to add when work is complete and all review comments have been addressed. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. Reviewed Volunteer to add when completing a review with trainee action still to take. labels Jan 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@cjyuan cjyuan cjyuan left review comments

At least 2 approving reviews are required to merge this pull request.

Assignees

No one assigned

Labels

Complete Volunteer to add when work is complete and all review comments have been addressed.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@arunkumarakilan @cjyuan